<template>
  <div class="system-log-container">
    <tree-view ref="first" class="tree-container" :treeData="treeData" :checkStrictly="true"
               :checkOnClickNode="true" :defaultExpandAll="true"
               :operateLevel="defaultProps" @on-check-change="checkChange">
    </tree-view>
    <el-card class="log-container">
      <div slot="header" class="title">
        <span>日志列表</span>
        <el-button class="refresh" type="text" @click="getLogView">刷新</el-button>
      </div>
<!--      <el-scrollbar class="scrollbar">-->
        <span v-for="(log, index) in logViewData" :key="index" class="text">
          {{ log }}
        </span>
<!--      </el-scrollbar>-->
    </el-card>
  </div>
</template>

<script>

export default {
  name: "SystemLog",
  components: {
    // TreeView
  },
  data() {
    let baseUrl = managerRemoteUrl;
    return {
      urls: {
        getTreeUrl: baseUrl + '/system/log/tree', // 获取日志树-create by zqw 2021-02-25
        getLogUrl: baseUrl + '/system/log/view', // 获取日志-create by zqw 2021-02-25
      },
      treeData: [], // 日志树
      defaultProps: {
        children: 'children',
        label: 'label'
      },
      selectedMenus: {},
      value: 0,
      logViewData: [],
    }
  },
  mounted() {
    this.getTreeData();
  },
  methods: {
    // 获取树
    getTreeData() {
      this.httpRequest("get", this.urls.getTreeUrl, {}, {fullSuccess: true}).then(res => {
        this.treeData = [res.value];
      })
    },
    // 选中节点
    checkChange(data) {
      if (data.data.data && data.data.data.file) {
        this.selectedMenus = data.data;
        this.$prompt('请输入行数', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          inputPattern: /^[0-9]*[1-9][0-9]*$/,
          inputErrorMessage: '请输入有效的整数',
        }).then(({value}) => {
          this.value = value;
          this.getLogView()
        })
      }
    },
    // 获取日志
    getLogView() {
      this.httpRequest("get", this.urls.getLogUrl, {}, {
        fullSuccess: true,
        options: {params: {filePath: this.selectedMenus.data['filePath'], lines: this.value}}
      }).then(res => {
        this.logViewData = res.value;
      })
    },
  }
}
</script>

<style lang="scss" scoped>
@import "../../../assets/styles/base_style";

.system-log-container {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: space-between;

  .tree-container, .log-container {
    width: calc(50% - 10px);
  }

  .title {
    display: flex;
    justify-content: space-between;
    align-items: center;

    .refresh {
      cursor: pointer;
      padding: 0;
    }
  }

  /deep/ .el-card__body {
    height: calc(100% - 61px);
    overflow: auto;
    @include scrollbarStyle(10px, 5px, none)
  }

  .text {
    white-space: pre;

  }
  .scrollbar {
    width: 100%;
    height: 100%;
  }
}
</style>
